<template>
  <div>
    <divider>账号信息</divider>
  <group title="登录">
    <x-input title="用户名" placeholder="请输入用户名" novalidate v-model="userName" :show-clear="true" :icon-type="iconType" placeholder-align="left"></x-input>

    <x-input type="password" title="密 码" placeholder="请输入密码" novalidate v-model="passWd" :show-clear="true"  placeholder-align="left"></x-input>

    <x-input type="password" max-length="5" title="验证码" placeholder="请输入验证码" novalidate v-model="capchaCode" :show-clear="true"  placeholder-align="left">
      <img slot="right" class="weui-vcode-img" v-bind:src="imgsrc" v-on:click='changeimg'>
    </x-input>
  </group>
  <group>
  <divider>点击登录</divider>
    <flexbox>
        <flexbox-item>
          <x-button type="primary"  v-bind:disabled='!userName || ! passWd || !capchaCode' @click.native='tosubmit'>确认</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn">清空</x-button>
        </flexbox-item>
      </flexbox>
      </group>
  </div>
</template>
<script>
  import { XInput, Group, XButton, Cell,Divider,Box, GroupTitle,  Flexbox, FlexboxItem,Toast } from 'vux'
  import store from '@/vuex/store'
  import { mapActions, mapGetters } from 'vuex'
  import APIURL from '@/api/apiurl'
  import personlogin from '@/vuex/actions/login/personlogin'  
  export default {
    beforeMount:function(){
      store.dispatch('getGuid')
    },
    mounted:function () {
        
    },
    components: {
    XInput,
    XButton,
    Group,
    Cell,
    Divider,
    GroupTitle,
    Flexbox,
    FlexboxItem,
  },
    data () {
      return {
        iconType: '',
        timespan:new Date().getTime(),
        userName:'',
        passWd:'',
        capchaCode:''
      }},
    name: 'login',
    methods: {
      ...mapActions([
        'getGuid','setUserinfo','setToken' // 映射 this.increment() 为 this.$store.dispatch('increment')
      ]),
      changeimg:function(){
         this.timespan=new Date().getTime()
      },
      tosubmit:function(){
        var model={
          username:this.userName,
          password:this.passWd,
          capcha:this.capchaCode,
          guid:this.getguid,
          requestdatetime:new Date().toLocaleString()
        }
        var that =this        
        personlogin(model).then(function(data){
          store.dispatch('setUserinfo',data)
          store.dispatch('setToken',data.token)
          that.$vux.toast.show({
          text: '登录成功！'
})
          that.$router.push('home2')
          
        },function(data){

          that.timespan=new Date().getTime()
        })
        
      }
    },
    computed: {
      ... mapGetters(['getguid']),
      imgsrc:function() {
        return APIURL.AUTH_GETCAPTCHAIMAGE+"guid="+this.getguid+"&v="+this.timespan
      }
    }
  }

</script>
<style>

</style>
